<div class="layui-form" id="layuiadmin-form-admin" lay-filter="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <input type="hidden" value="{$id ?? ''}" id="id"/>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    日志等级
                </label>
                <div class="layui-input-block">
                    <select name="journal_level_id" id="level_id" lay-search="">
                        <option value="">请选择日志类别</option>
                        {foreach $journal_level as $key=>$vo}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    批注
                </label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="LAY_demo_editor" lay-verify="remarks"
                              name="remarks"></textarea>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label">签名</label>
                <div id="signature"></div>
                <p style="text-align: center">
                    <b style="color: red">请按着鼠标写字签名。</b>
                </p>
                <div id="someelement"></div>
                <input type="hidden" id="test"/>
                <div class="layer-footer" style="position: fixed;left:15px;bottom: 15px;width:100%;height:30px">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="add">确定</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="reset">重写</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="/static/signature/jSignature.min.js"></script>
<script src="/static/signature/jSignature.min.noconflict.js"></script>
<script src="/static/admin/layui/layui.js">
</script>

<script>
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable: '../admin/lib/extend/authtree'
    }).use(['index', 'form'], function () {
        var $ = layui.$, form = layui.form;
        var arguments = {
            width: '100%',
            height: '300px',
            signatureLine: false,//去除默认画布上那条横线
            lineWidth: '5'
        };

        var $sigdiv = $("#signature");
        $sigdiv.jSignature(arguments); // 初始化jSignature插件.
        $("#add").click(function () {
            var type_id = $("#level_id").val();
            var native = $sigdiv.jSignature("getData", "native").length;
            if (type_id == "") {
                layer.msg('请评级');
                return false;
            } else if (native == 0) {
                layer.msg('请签名！');
                return false;
            } else {
                var datapair = $sigdiv.jSignature("getData", "svgbase64");
                var i = new Image();
                i.src = "data:" + datapair[0] + "," + datapair[1];
                $('#test').val(datapair);
                layer.confirm("如果确认无误，请确认？<br/><img src=" + i.src + " height='100px' width='100px' />", function (t) {
                    $.ajax({
                        url: "{:url('journal/approval')}",
                        type: "post",
                        dataType: "json",
                        data: {
                            'path': $('#test').val(),
                            'remarks': $('#LAY_demo_editor').val(),
                            'id': $('#id').val(),
                            'journal_level_id': type_id,
                        },
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg(res.msg, {icon: 1});
                                window.parent.location.reload();//刷新父页面
                                layer.closeAll(); //关闭弹层
                            } else {
                                layer.msg(res.msg, {icon: 5});
                                return false;
                            }
                        }
                    });
                    layer.close(t);
                });
            }
            console.log(someelement);


        });
        $("#reset").click(function () {
            $sigdiv.jSignature("reset"); //重置画布，可以进行重新作画.
            $("#someelement").html("");
        });

        function downloadFile(fileName, blob) {
            var aLink = document.createElement('a');
            console.log(aLink)
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            aLink.dispatchEvent(evt);
        }

        /**
         * 将以base64的图片url数据转换为Blob
         * @param urlData
         *            用url方式表示的base64图片数据
         */
        function convertBase64UrlToBlob(urlData) {

            var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte

            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }

            return new Blob([ab], {type: 'image/png'});
        }
    });
</script>
